<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>Webpack-OptimizeCssAssetsWebpackPlugin</h1>
      <p>压缩输出CSS文件</p>
      <p>yarn add optimize-css-assets-webpack-plugin --dev</p>
      <p>安装完成后导入插件</p>
      <p>
        const OptimizeCssAssetsWebpackPlugin =
        requeire('optimize-css-webpack-plugin')
      </p>
      <p>然后在plugin属性中使用</p>
      <p>plugin : [ new OptimizeCssAssetsWebpackPlugin() ]</p>
      <p>
        但是放在plugin的话,这个插件就会在任何情况下被执行,而配置到optimization中的minimizer的话,只会在minimizer这个特性开启时才会执行(生成环境是自动开启的)
      </p>
      <p>
        optimization: { minimizer : [ new OptimizeCssAssetsWebpackPlugin() ] }
      </p>
      <p>
        但是如果这样配置的话js文件就会打包不了,需要安装(yarn add
        terser-webpack-plugin --dev)
      </p>
      <p>const TerserWebpackPlugin = requeire('terser-webpack-plugin')</p>
      <p>
        optimization: { minimizer : [ new TerserWebpackPlugin ,new
        OptimizeCssAssetsWebpackPlugin() ] }
      </p>
    </div>
    <script></script>
  </body>
</html>
